// reset
* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  // // font-family: "lucida Grande", Tahoma, Arial, Helvetica, 宋体, sans-serif;
  // font-family: Arial, Helvetica, 宋体, sans-serif;
  // line-height: 1.2em;
  // background: #f1f1f1;

  line-height: 22px;
  // font-family: 微软雅黑, \5b8b\4f53, Arial, sans-serif;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

// color
$colors: (
  "primary": #333,
  "nav": #2ca3b3,
  "navBlack": #2b3a42,
  "black": #000,
  "white": #fff,
  "red": #ff4e50,
  "red1": #e76f67,
  "orange": #fc913a,
  "olive": #e3ffbd,
);

.border-radius-5 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

// text-align
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

// size
$base-font-size: 1rem;
$font-sizes: (
  // 12px
    xs: 0.75,
  //14px
    sm: 0.875,
  //16px
    md: 1,
  //18px
    lg: 1.125,
  //20px
    xl: 1.25,
  //22px
    xxl: 1.375
);

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}

// flex 布局
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-grow-1 {
  flex-grow: 1;
}

$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: strech,
);

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

// margin padding
$spacing-types: (
  m: margin,
  p: padding,
);
$spaing-directions: (
  t: top,
  l: left,
  r: right,
  b: bottom,
);
$spacing-base-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

@each $typeKey, $type in $spacing-types {
  // .m-1
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size;
    }
  }
  // .mx-1
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }
    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }
  // .mt-1
  @each $directonKey, $direction in $spaing-directions {
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}#{$directonKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }
}
